import React, { useEffect, useState } from "react"

import "./PostMessageReactSide.scss"

const Home = () => {
  const [message, setMessage] = useState("")

  useEffect(() => {
    // 页面加载已完成，通知父页面
    console.log("child page mounted")
    window.parent.postMessage({ retcode: 200 }, "*")
  })

  useEffect(() => {
    window.addEventListener("message", (e) => {
      console.log(e.data)
      setMessage(e.data)
    })
  }, [])

  return (
    <div className="container">
      <p>这是基于React的页面（子页面）</p>
      <p>
        <span className="received-data">收到的数据：</span>
        {message}
      </p>
    </div>
  )
}

export default Home
